<template>
    <div>
        <div>
            <input v-model="keyWord" placeholder="搜索" type="text">
        </div>
        <div style="margin-top: 20px">
            <table border width="600" cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th>物品名称</th>
                    <th>物品单价</th>
                    <th>物品数量</th>
                    <th>物品总价</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in searcherData" :key="item.name">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num > 1 ? item.num-- : null">-</button>
                        {{item.num}}
                        <button @click="item.num < 99 ? item.num++ : null">+</button>
                    </td>
                    <td>{{item.num * item.price}}</td>
                    <td><button>删除</button></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5" align="right">总价{{total}}</td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

</template>

<script setup lang="ts">
    import {ref,computed, reactive} from 'vue'
    let keyWord = ref<string>("")
    interface Data {
        name:string,
        price:number,
        num:number
    }
    let data = reactive<Data[]>([
        {
            name:'帽子',
            price:100,
            num: 50
        },
        {
            name:'鞋子',
            price:200,
            num: 10
        },
        {
            name:'裤子',
            price:1000,
            num: 5
        }
    ])

    // const total = ()=>{
    //   $total.value = data.reduce((previousValue, currentValue) => {
    //     return previousValue + currentValue.num * currentValue.price
    //   }, 0)
    // }
    const total = computed(()=>{
        return data.reduce((previousValue, currentValue) => {
            return previousValue + currentValue.num * currentValue.price
        }, 0)
    })
    const searcherData = computed(()=> {
        return data.filter((item:Data)=> {
            return item.name.includes(keyWord.value)
        })
    })
</script>

<style scoped>

</style>
